<template>
    <div>
        <h2 class="h2"><span>军籍信息表--军队无军籍离退休职工</span></h2>
        <div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm junjixinxibiao" id="junjixinxibiao" accept-charset="UTF-8">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="原部队代号：">
                            <el-input v-model="ruleForm.D003" id="D003" placeholder="请输入原部队代号（不填番号）"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="离退休时间：" prop="D010">
                            <el-date-picker v-model="ruleForm.D010" type="date" placeholder="离退休时间"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="离休退休证件名称：" prop="D013">
                            <el-input v-model="ruleForm.D013" id="D013" placeholder="请输入离休退休证件名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="离休退休证件号码：" prop="D014">
                            <el-input v-model="ruleForm.D014" id="D014" placeholder="请输入离休退休证件号码"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="参加工作时间：" prop="D015">
                            <el-date-picker v-model="ruleForm.D015" type="date" placeholder="请填写参加工作时间"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item class="select2" label="离休退休证件：" prop="D012">
                            <el-select v-model="ruleForm.D012" placeholder="请选择离休退休证件">
                                <el-option label="原件" value="1"></el-option>
                                <el-option label="证明材料" value="2"></el-option>
                            </el-select>            
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item class="select2" label="原职级：" prop="D009">
                            <el-cascader
                                :options="options"
                                v-model="ruleForm.D009"
                                @change="handleChange">
                            </el-cascader>   
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item class="select2" label="成为军队职工方式：" prop="D018">
                            <el-select v-model="ruleForm.D018" placeholder="请选择成为军队职工方式">
                                <el-option label="招工" value="1"></el-option>
                                <el-option label="地方调入" value="2"></el-option>
                                <el-option label="兵改工" value="3"></el-option>
                                <el-option label="军转安置" value="4"></el-option>
                                <el-option label="随军安置" value="5"></el-option>
                                <el-option label="征地农转工" value="6"></el-option>
                                <el-option label="接收大中专毕业生" value="7"></el-option>
                                <el-option label="其他" value="8"></el-option>
                            </el-select>            
                        </el-form-item>
                    </el-col>            
                </el-row>
                <el-row>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import options from './options.js'
export default {
    data(){
        return {
            options:options,
            ruleForm: { //默认数据
                D003:'',//原部队代号
                D010:'',//离退休时间
                D013:'',//离休退休证件名称
                D014:'',//离休退休证件号码
                D015:'',//参加工作时间
                D009:[],//原职级
                D012:'',//离休退休证件
                D018:'',//成为军队职工方式
            },
            rules: {  //规则
                D009:[
                    { required: true, message: '请填写军休类别', trigger: 'blur' },
                ],
                D010:[
                     { type: 'date', required: true, message: '请选择离退休时间', trigger: 'change' }
                ],
                D011:[
                    { required: true, message: '请填写军休类别', trigger: 'blur' },
                ],
                D012:[
                    { required: true, message: '请选择离休退休证件', trigger: 'blur' },
                ],
                D013:[
                    { required: true, message: '请填写离休退休证件名称', trigger: 'blur' },
                ],
                D014:[
                    { required: true, message: '请填写离休退休证件号码', trigger: 'blur' },
                ],
                D015:[
                    { type: 'date', required: true, message: '请选择参加工作时间', trigger: 'change' }
                ],
                D018:[
                    { required: true, message: '请填写成为军队职工方式', trigger: 'blur' },
                ],
            },
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('成功，tuiyishibing!');
                    console.log(this.ruleForm)
                    this.$emit('submitfn',2)
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        hujisuozaidifnsss(value){
            console.log(value)
            this.hujisuozaidiData = value
        },
        hujisuozaidifnsss2(value){
            console.log(value)
        },
        //上传
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    },
    components:{
        
    }
}
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}
.el-row:last-child {
    margin-bottom: 0;
}
</style>